<template>
  <div class="balance-main">
    <div class="top">
      <div class="top-left">
        <div class="dot-common"></div>
        <span class="text">我的电子现金</span>
      </div>
      <div class="top-right">
        <div class="button thumb" @click="() => (showAct = 'top_up')">
          立即充值
        </div>
        <div class="button thumb" @click="() => (showAct = 'detail')">
          电子现金明细
        </div>
      </div>
    </div>
    <div class="top-second">
      <div class="top-second-left">￥&nbsp;{{ twoFixed(800000) }}</div>
    </div>

    <div class="content" v-show="showAct === 'detail'">
      <Balance
        :showTitle="true"
        :show-search="false"
        :show-column="false"
        :showDate="false"
        title="电子现金明细"
        :searchPlaceholder="`搜索流水号和订单号`"
      >
      </Balance>

      <div class="table-container">
        <Table
          :topCss="{
            background: '#f5f8fe',
            height: '.3042rem',
            fontSize: '.0893rem',
          }"
          :tdCss="{
            fontSize: '.07rem',
            padding: '.04rem',
          }"
          :lineCss="{
            height: `.2188rem`,
            background: '#f5f8fe',
          }"
          :borderSpacing="`0 .0729rem`"
          headerFamily="PuHuiMedium"
          :dataSource="factoryCashDetail"
          :headerFontSize="`400`"
          :column="column"
        >
          <template #add_up="{ row }">
            <span class="small">￥{{ twoFixed(row.add_up) }}</span>
          </template>
          <template #top_up="{ row }">
            <span class="small">￥{{ twoFixed(row.top_up) }}</span>
          </template>
          <template #disbursement="{ row }">
            <span class="small"> ￥{{ twoFixed(row.disbursement) }}</span>
          </template>
          <template #balance="{ row }">
            <span class="small">￥{{ twoFixed(row.balance) }}</span>
          </template>
        </Table>
      </div>
    </div>

    <div class="content" v-show="showAct === 'top_up'">
      <div class="form">
        <div class="row">
          <label> 充值厂家: </label>
          <div class="select"><Select placeholder="请选择充值厂家" /></div>
        </div>

        <div class="row">
          <label> 充值金额: </label>
          <div class="input">
            <input v-model.number="number" :placeholder="`请输入充值金额`" />
          </div>
        </div>

        <div class="button thumb" @click="() => (showTopUp = true)">
          确认充值
        </div>
      </div>
    </div>
  </div>
  <Dialog :show-top="false" v-model:visible="showTopUp">
    <div class="dialog">
      <span>CNY&nbsp;{{ twoFixed(number) }}</span>
      <img :src="publicUrl('/images/qrcode.png')" />
    </div>
  </Dialog>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl, twoFixed } from "@/utils/util";
import Balance from "@/components/Balance/index.vue";
import Table, { Column } from "@/components/Table";
import Select from "@/components/Select/index.vue";
import Dialog from "@/components/Dialog/index.vue";
import factoryCashDetail from "@/json/factoryCashDetail.json";

const showAct = ref<string>("detail");
const number = ref<number>(0);
const showTopUp = ref<boolean>(false);
const column = ref<Array<Column>>([
  { title: "厂家名称", dataKey: "factory_name", width: 400, align: "center" },
  {
    title: "累计使用金额",
    dataKey: "add_up",
    align: "center",
    width: 200,
    slotName: "add_up",
  },
  {
    title: "充值",
    dataKey: "top_up",
    width: 180,
    align: "center",
    slotName: "top_up",
  },
  {
    title: "支出",
    dataKey: "disbursement",
    width: 180,
    align: "center",
    slotName: "disbursement",
  },
  {
    title: "余额",
    dataKey: "balance",
    width: 180,
    align: "center",
    slotName: "balance",
  },
]);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
